<template>
  <div>
    <p @mousemove="yidong">{{ zuobiaoX }}</p>
    <p @mousemove="yidong">{{ zuobiaoY }}</p>
  </div>
<img :src='Url'  >
  <button @click="tupian">点击</button>
</template>

<script lang="ts">
 import { defineComponent } from 'vue'
  export default  defineComponent({
    name:'App'
  })
</script>
<script lang="ts" setup>
import {ref} from 'vue'
import axios from 'axios'
  const zuobiaoX=ref(0)
  const zuobiaoY=ref(0)
  const Url=ref("")
  const yidong=function(e:MouseEvent){
    zuobiaoX.value=e.clientX
    zuobiaoY.value=e.clientY
  }
const tupian=async()=>{
    const      result=await axios.get(`https://dog.ceo/api/breeds/image/random`) 
    console.log(result);
    Url.value=result.data.message
                                           
}
</script>

<style lang="less" scoped>
  
</style>